<template>
	<view>
		<view v-for="(node, index) in treeData" :key="node.id">
			<view v-if="!node.ishow">
				<view v-if="uselast">
					<view v-if="node.children.length > 0" class="user-box-ss">
						<view :style="'margin-left:'+(zjflag*30+32)+'rpx;'" class="item_name_ef"
							@tap.stop.prevent="item_click" :data-set="node" :id="index">
							<text :class="['iconfont', image[node.isopen?0:1]]" style="margin-right: 16rpx;color:#a8abb2" v-if="node.children&&node.children.length > 0"
								@tap.stop.prevent="open_item(index)"></text>
							<view>
								<!-- <text v-if="node.children"
									:style="'color:'+colors[zjflag]+';margin-right:10rpx'">{{title[zjflag]}}</text> -->
								{{ node.name }}
							</view>
							<!-- <text style="margin-left: 32rpx;color:#f00" v-if="node.children&&node.children.length > 0"
								@tap.stop.prevent="open_item(index)">{{image[node.isopen?0:1]}}</text> -->
						</view>
					</view>
					<view v-else class="user-box-ss">
						<view :style="'margin-left:'+(zjflag*30+32)+'rpx;'" class="item_name"
							@tap.stop.preventclick="item_click" :data-set="node" :id="index">
							<text :class="['iconfont', image[node.isopen?0:1]]" style="margin-right: 16rpx;color:#a8abb2" v-if="node.children&&node.children.length > 0"
								@tap.stop.prevent="open_item(index)"></text>
							<view>
								<!-- <text v-if="node.children"
									:style="'color:'+colors[zjflag]+';margin-right:10rpx'">{{title[zjflag]}}</text> -->{{ node.name}}
							</view>
						</view>
					</view>
				</view>
				<view v-else class="user-box-ss">
					<view :style="'margin-left:'+(zjflag*30+32)+'rpx;'" class="item_name" @tap.stop.prevent="item_click"
						:data-set="node" :id="index">
						<text :class="['iconfont', image[node.isopen?0:1]]" style="margin-right: 16rpx;color:#a8abb2" v-if="node.children&&node.children.length > 0"
							@tap.stop.prevent="open_item(index)"></text>
						<view>
							<!-- <text v-if="node.children"
								:style="'color:'+colors[zjflag]+';margin-right:10rpx'">{{title[zjflag]}}</text> -->{{ node.name }}
						</view>
					</view>
				</view>
			</view>
			<view v-if="node.isopen">
				<TreeData v-if="node.children && node.children.length > 0" :tree-data="node.children"
					@callBack="mycallback" :uselast="uselast" :zjflag="zjflag+1" />
			</view>
            
		</view>
	</view>
</template>
 
<script>
	import TreeData from '@/components/tree-node/index.vue';
	export default {
		components: {
			// TreeData
		},
		name: 'TreeData',
		props: {
			treeData: {
				type: Array,
				required: true,
			},
			uselast: {
				type: Boolean,
				default: false
			},
			callback: {
				type: String,
				default: ''
			},
			showkey: {
				type: String,
				default: ''
			},
			zjflag: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				title: ["①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩"],
				// image: ["🔺", "🔻"]
				image: ["icon-zhankai","icon-shousuo"],
				colors: ['#ff0', '#f00', '#00f', '#0ff', '#f0f', '#0f0'],
			}
		},
		methods: {
			item_click: function(e) {
				// console.log("item_click", JSON.stringify(item.currentTarget.dataset.set))
				let id = e.currentTarget.id
				let item = e.currentTarget.dataset.set
				if (this.uselast) {
					if (item.children.length == 0) {
						this.$emit('callBack', {
							mydetail: item
						});
					} else {
						this.treeData[id].isopen = !this.treeData[id].isopen
					}
 
				} else {
					this.$emit('callBack', {
						mydetail: item
					});
				}
				// if (item.isopen) {
 
				// 	this.treeData[id].isopen = false
				// } else {
				// 	this.treeData[id].isopen = true
				// }
				this.$forceUpdate()
			},
			open_item: function(id) {
 
				this.treeData[id].isopen = !this.treeData[id].isopen
				this.$forceUpdate()
			},
			mycallback: function(item) {
				this.$emit('callBack', {
					mydetail: item
				});
 
			}
		},
	};
</script>
 
<style lang="scss" scoped>
	// @function tovmin($rpx) {
	// 	//$rpx为需要转换的字号
	// 	@return #{$rpx * 100 / 750}vmin;
	// }
 
 
	.item_name {
		display: flex;
		justify-content: space-between;
		font-size: 28;
		padding-top: 5rpx;
		padding-bottom: 5rpx;
		flex: 1;
		// min-height: tovmin(80);
		align-items: center;
 
		text-align: left;
 
		// margin-right: tovmin(64);
		color: #333;
		font-weight: 600;
		overflow-y: auto;
		overflow-x: scroll;
 
		// border-bottom: solid #efefef 2rpx;
		white-space: normal;
		word-break: break-all;
		word-wrap: break-word;
		padding: 25.6rpx 0;
	}
    .user-box-ss{
		border-bottom: solid #efefef 2rpx;
	}
	.item_name_ef {
		font-size: 28;
		padding-top: 5rpx;
		padding-bottom: 5rpx;
		flex: 1;
		// min-height: tovmin(80);
		display: flex;
		// justify-content: space-between;
		align-items: center;
		text-align: left;
		// margin-right: tovmin(64);
		color: #999;
		font-weight: 600;
		overflow-y: auto;
		overflow-x: scroll;
		white-space: normal;
		word-break: break-all;
		word-wrap: break-word;
		padding: 25.6rpx 0;
	}
	.icon-zhankai:before{
		margin-right: 16rpx;
	}
</style>